import { ArrowRightOutlined } from "@ant-design/icons"
import { StoryObj } from "@storybook/react"
import { Button, Card, Flex, Form, Typography } from "antd"
import { useState } from "react"

// import Switch01 from "@/pages/dxn/gameManager/gameRuleManager/switch01"

const Template = (args: { checkedValue: string; uncheckedValue: string }) => {
	const { Title, Paragraph, Text } = Typography
	const [bodyStr, setBodyStr] = useState("")
	const submit = (body: any) => {
		setBodyStr(JSON.stringify(body))
	}
	return (
		<Form onFinish={submit} initialValues={{ isChecked: args.checkedValue ?? 1 }}>
			<Typography>
				<Title level={2}>自定义开关值(缺省是 0/1)</Title>
				<Paragraph>
					<Flex gap={8} align="center">
						<Flex vertical>
							<Text code>{`<Form.Item name="isChecked">`}</Text>
							<Text code style={{ paddingLeft: "30px" }}>{`<Switch01 />`}</Text>
							<Text code>{`<Form.Item />`}</Text>
						</Flex>
						<ArrowRightOutlined />
						<Card>
							<Form.Item name="isChecked">
								<div>待开发</div>
								{/* <Switch01 {...args} /> */}
							</Form.Item>
						</Card>
					</Flex>
				</Paragraph>
				<Paragraph>
					<Button htmlType="submit" type="primary">
						提交
					</Button>
					<div>提交的body参数：{bodyStr}</div>
				</Paragraph>
			</Typography>
			{/* <Flex vertical gap={8}>
				<Flex gap={16} align="center">
					<span style={{ fontWeight: "bold" }}>代码示例:</span>
					<span></span>
				</Flex>
			</Flex> */}
		</Form>
	)
}

export default {
	title: "自定义开关值switch",
	component: Template
}

type Story = StoryObj<typeof Template>

export const VenueSelect: Story = {
	args: {}
}
